<template>
    <div class="jcupload">
        <el-upload
            :action="uploadApi"
            :show-file-list="true"
            :on-success="handleFileSuccess"
            :on-error='handleError'
            :on-remove="handleFileRemove"
            :before-upload="beforeFileUpload"
            :on-change='handleChange'
            :headers="{clientname: clientname, Authorization: token}"
            :file-list='fileList'
            :limit="fileSize"
            :list-type='listType'
            :multiple="true">
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip"><div v-if="scene=='image'">图片不能超多10M</div><div v-if="scene=='video'">视频不能超多300M</div></div>
            <div slot="tip" class="el-upload__tip"><div v-if="scene==''">图片不能超多10M，视频不能超多300M</div></div>
        </el-upload>
    </div>
</template>
<script>
import {uploadApi_qlw} from '@/api/common.js'
import {clientname} from '@/settings'
import { Loading } from 'element-ui';
import { getToken } from '@/utils/auth'
export default {
    name: 'jcupload',
    components:{},
    props:{
        scene: {
            type: String,
            default: ''
        },
        filePath:{
            type: String,
            default: 'file'
        },
        fileSize:{
            type:  Number,
            default: 0
        },
        listType:{
            type:  String,
            default: ''
        },
        flag:{
            type: Number,
            default: -1
        },
        fileList:{
            type: Array,
            default: res=>[]
        },
        fileUrl:{
            type:  String,
            default: ''
        },
        borderRadius:{
            type: Number,
            default: 0
        },
    },
    data(){
        return{
            uploadApi: uploadApi_qlw,
            dataUrl: '',
            fileType: '',
            clientname: clientname,
            fullscreenLoading: null,
            token: ''
        }
    },
    watch: {
        fileList(newValue, oldValue){
            this._fileList = newValue
        }
    },
    created(){
        // this._fileList = this.fileList
        this.token = 'token ' + getToken()
    },
    
    methods:{
        //上传成功
        handleFileSuccess(res, file, fileList) {
            this.fullscreenLoading.close()
            this._fileList = fileList
        },
        //上传失败
        handleError(err, file, fileList){
            this.fullscreenLoading.close()
            console.log('上传失败', err, file, fileList)
        },
        //文件移除
        handleFileRemove(file, fileList){
            console.log('文件移除', file, fileList)
            this._fileList = fileList
        },
        //文件发生改变
        handleChange(file, fileList){
            console.log('文件发生改变', file, fileList)
        },
        //组装数据
        handleFileList(){
            console.log('_fileList', this._fileList)
            var list = []
            for(var item of this._fileList){
                list.push(item.response.data.url)
            }
            return list
        },
        //文件上传前校验
        beforeFileUpload(file) {
            console.log('上传前', file)
            if(this.scene=='image' && file.type.indexOf('image')==-1){
                this.$message.error('请上传合法的图片!');
                return false
            }else if(this.scene=='video' && file.type.indexOf('video')==-1){
                this.$message.error('请上传合法的视频!');
                return false
            }else{
                if(file.type.indexOf('image')>-1){
                    if (file.size>1024*1024*10) {
                        this.$message.error('上传图片大小不能超过 10MB!');
                        console.log('上传图片大小不能超过 10MB!')
                        return false
                    }else{
                        this.fullscreenLoading = Loading.service({ fullscreen: true, text: '文件在玩命上传中，请稍后！'});
                        return true
                    }
                }else if(file.type.indexOf('video')>-1) {
                    if (file.size>1024*1024*2300) {
                        this.$message.error('上传图片大小不能超过 2300MB!');
                        console.log('上传图片大小不能超过 300MB!')
                        return false
                    }else{
                        this.fullscreenLoading = Loading.service({ fullscreen: true, text: '文件在玩命上传中，请稍后！' });
                        return true
                    }
                }
            }
        }
    }
}
</script>
<style lang='scss' scoped>

</style>
